<!--  -->
<template>
<div class='form_steps'>
    <div class="setps_container" :style="{width:width}">
        <ul class="steps">
            <li class="s_item" :class="index+1==step?'active':''" v-for="(item,index) in stepConfig" :key="index">
                <div class="item_cont" @click="goView(index)">
                    <div class="i_icon">
                        <img :src="index+1==step?item.acimg:item.img" alt="">
                    </div>
                    <div class="i_info">
                        <div class="i_num">{{$t('message.application.step',{number:(index+1)})}}</div>
                        <div class="i_word">{{item.name}}</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
name:'zzrFormStep',
props:{
    step:{
        type:[String,Number],
        default:1
    },
    stepList:{
        type:Array,
        default:()=>[]
    },
    width:{
        type:[String,Number]
    }
},
data() {
//这里存放数据
    return {
        stepConfig:[
            {enable:false,name:this.$t('message.application.stepCategory'),img:require('@/assets/img/icon_s1@2x.png'),acimg:require('@/assets/img/icon_s11@2x.png'),url:'stepOne'},
            {enable:false,name:this.$t('message.application.chooseZy'),img:require('@/assets/img/icon_s2@2x.png'),acimg:require('@/assets/img/icon_s22@2x.png'),url:'stepTwo'},
            {enable:false,name:this.$t('message.application.applyForm'),img:require('@/assets/img/icon_s3@2x.png'),acimg:require('@/assets/img/icon_33@2x.png'),url:'basicInform'},
            {enable:false,name:this.$t('message.application.uploadFile'),img:require('@/assets/img/icon_s4@2x.png'),acimg:require('@/assets/img/icon_44@2x.png'),url:'stepFour'}
        ]
    };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    goView(index){
        if(this.stepConfig[index].enable && this.step!==index+1){
            this.$router.push({name:this.stepConfig[index].url})
        }
    },
    setStepList(arr){
        if(arr.length!==0){
            this.stepConfig = this.stepList
        }
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.setStepList(this.stepList)
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='stylus' scoped>
//@import url(); 引入公共css类
.setps_container
    position relative
    box-shadow 0px 0px 10px 3px rgba(18,52,98,0.1)
    border-radius 10px
    overflow hidden
    margin 0 auto 20px
    .steps
        display flex
        &:after
            content ''
            display block
            clear both
        .s_item
            flex 1
            list-style none
            height 66px
            box-sizing border-box
            position relative
            background $white
            padding-top 12px
            &:after
                content ''
                position absolute
                display block
                width 0
                height 0
                border-left 22px solid $white
                border-top 33px solid transparent
                border-bottom 33px solid transparent
                right -22px
                top 0
                z-index 2
            .item_cont
                display flex
                justify-content center
                align-items center
                position relative
                cursor default
                &::after
                    content ''
                    position absolute
                    display block
                    width 0
                    height 0
                    border-left 22px solid #d7d7d7
                    border-top 33px solid transparent
                    border-bottom 33px solid transparent
                    right -23px
                    top -12px
                    z-index 2
                .i_icon
                    display block
                    margin-right 20px
                    img
                        width 24px
                        height 24px
                .i_info
                    .i_num
                        color $colorDeepPrimary
                        font-size $titleSize
                        line-height 1.2
                        font-weight 600
                    .i_word
                        color $colorDeepPrimary
                        font-size $normalSize
                        margin-top 5px
            &.active
                background linear-gradient(90deg,rgba(122,207,244,1) 0%,rgba(2,110,254,1) 100%)
                .i_info
                    .i_num
                        color $white
                    .i_word
                        color $white
                &:after
                    content ''
                    position absolute
                    display block
                    width 0
                    height 0
                    border-left 22px solid $colorBle
                    border-top 33px solid transparent
                    border-bottom 33px solid transparent
                    right -22px
                    top 0
                    z-index 2

</style>
